<template>
  <div>
    <input type="file" multiple @change="change" />


    <h1>当前照片</h1>
    <img :src="imgFiles.currentImg" alt="">

    <h1>压缩照片</h1>
    <img :src="imgFiles.compressImg" alt="">
  </div>
</template>
<script setup>
import { reactive } from 'vue';
import { compressImg, fileToBlob, blobToFile } from './hooks/index'


const imgFiles = reactive({
  currentImg: '',
  compressImg: ''
})
const change = async (e) => {
  console.log(e.target.files[0]);

  imgFiles.currentImg = URL.createObjectURL(e.target.files[0])
  

  compressImg(e.target.files[0])
    .then(compress => {
      console.log(blobToFile(compress, e.target.files[0].name));
      imgFiles.compressImg = URL.createObjectURL(compress)
    })
    .catch(error => {
      console.log(error);
    })
}
</script>